<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    
    <title>page 2 | 归档 | Coco ’s blog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <meta name="author" content="Coco">
    
    
    
    <meta name="description" content="Coco的个人博客，记录个人学习成长，热爱前端，喜欢设计，爱好折腾。">
<meta property="og:type" content="website">
<meta property="og:title" content="page 2 | 归档 | Coco ’s blog">
<meta property="og:url" content="http://sbco.cc/archives/page/2/index.html">
<meta property="og:site_name" content="Coco ’s blog">
<meta property="og:description" content="Coco的个人博客，记录个人学习成长，热爱前端，喜欢设计，爱好折腾。">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="page 2 | 归档 | Coco ’s blog">
<meta name="twitter:description" content="Coco的个人博客，记录个人学习成长，热爱前端，喜欢设计，爱好折腾。">
    
    <link rel="icon" type="image/x-icon" href="/favicon.png">
    <link rel="stylesheet" href="/css/uno.css">
    <link rel="stylesheet" href="/css/highlight.css">
    <link rel="stylesheet" href="/css/archive.css">
    <link rel="stylesheet" href="/css/china-social-icon.css">
</head>
<body>
    <span class="mobile btn-mobile-menu">
      <i class="icon icon-list btn-mobile-menu__icon"></i>
      <i class="icon icon-x-circle btn-mobile-close__icon hidden"></i>
    </span>
    
<header class="panel-cover panel-cover--collapsed">

  <div class="panel-main">
    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">
        
        <img src="/images/logo.png" alt="Coco ’s blog logo" class="panel-cover__logo logo" title="Click Me!!!"/>
        
        <h1 class="panel-cover__title panel-title"><a href="/" title="link to homepage">Coco ’s blog</a></h1>
        <hr class="panel-cover__divider" />
        
        <p class="panel-cover__description">
          少年不知愁滋味 为赋新词强说愁
        </p>
        <hr class="panel-cover__divider panel-cover__divider--secondary" />
        
        <div class="navigation-wrapper">
          <nav class="cover-navigation cover-navigation--primary">
            <ul class="navigation">
              
                
                <li class="navigation__item"><a href="/#blog" title="" class="blog-button">首页</a></li>
              
                
                <li class="navigation__item"><a href="/about/html/" title="" class="">关于</a></li>
              
                
                <li class="navigation__item"><a href="/archive" title="" class="">归档</a></li>
              
              <a target="_blank" href="https://github.com/chokcoco"><li class='navigation__item github' title="To my Github"></li></a>
              <a target="_blank" href="http://www.cnblogs.com/coco1s/"> <li class='navigation__item'><div class='navigation__item blog' title="To my cnblogs"></div></li></a>
            </ul>
          </nav>
          <!-- ----------------------------
To add a new social icon simply duplicate one of the list items from below
and change the class in the <i> tag to match the desired social network
and then add your link to the <a>. Here is a full list of social network
classes that you can use:
    icon-social-500px
    icon-social-behance
    icon-social-delicious
    icon-social-designer-news
    icon-social-deviant-art
    icon-social-digg
    icon-social-dribbble
    icon-social-facebook
    icon-social-flickr
    icon-social-forrst
    icon-social-foursquare
    icon-social-github
    icon-social-google-plus
    icon-social-hi5
    icon-social-instagram
    icon-social-lastfm
    icon-social-linkedin
    icon-social-medium
    icon-social-myspace
    icon-social-path
    icon-social-pinterest
    icon-social-rdio
    icon-social-reddit
    icon-social-skype
    icon-social-spotify
    icon-social-stack-overflow
    icon-social-steam
    icon-social-stumbleupon
    icon-social-treehouse
    icon-social-tumblr
    icon-social-twitter
    icon-social-vimeo
    icon-social-xbox
    icon-social-yelp
    icon-social-youtube
    icon-social-zerply
    icon-mail
-------------------------------->
<!-- add social info here -->


        </div>
      </div>
    </div>
    <div class="panel-cover--overlay"></div>
  </div>
</header>

    <div class="content-wrapper">
      <div class="content-wrapper__inner entry">
        


   <!-- do nothing -->


<div class="main-post-list">
    <ol class="post-list">
    
    
    <li>

      <h2 class="post-list__post-title post-title">
        <a href="/2016/06/14/boxShadow/" title="link to 【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧">【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧</a>
      </h2>

      <div class="post-list__meta">

        <time datetime="2016-06-14" class="post-list__meta--date date">2016-06-14</time> 
      </div>

      <div class="excerpt">
        
          <p>box-shadow 在前端的 CSS 编写工作想必十分常见。但是 box-shadow 除去它的常规用法，其实还存在许多不为人知的奇技淫巧。
        
      </div>

      <hr class="post-list__divider" />
    </li>
    
    <li>

      <h2 class="post-list__post-title post-title">
        <a href="/2016/05/25/pesudo/" title="link to 【CSS进阶】伪元素的妙用--单标签之美">【CSS进阶】伪元素的妙用--单标签之美</a>
      </h2>

      <div class="post-list__meta">

        <time datetime="2016-05-25" class="post-list__meta--date date">2016-05-25</time> 
      </div>

      <div class="excerpt">
        
          <p>最近在研读 <a href="https://github.com/cssmagic/CSS-Secrets">《CSS SECRET》</a>（CSS揭秘）这本大作，对 CSS 有了更深层次的理解，折腾了下面这个项目：</p><p><a href="http://chokcoco.github.io/magicCss/html/index.html">CSS3奇思妙想 – Demo</a> （请用 Chrome 浏览器打开，非常值得一看）。采用单标签完成各种图案，许多图案与本文有关。</p><p>也希望觉得不错的同学顺手在我的 Github 点个 star ： <a href="https://github.com/chokcoco/magicCss">CSS3奇思妙想</a> 。</p><p>正文从这里开始，本文主要讲述一下 伪元素 before 和 after 各种妙用。
        
      </div>

      <hr class="post-list__divider" />
    </li>
    
    <li>

      <h2 class="post-list__post-title post-title">
        <a href="/2016/05/17/scroll/" title="link to 【前端性能】高性能滚动 scroll 及页面渲染优化">【前端性能】高性能滚动 scroll 及页面渲染优化</a>
      </h2>

      <div class="post-list__meta">

        <time datetime="2016-05-17" class="post-list__meta--date date">2016-05-17</time> 
      </div>

      <div class="excerpt">
        
          <p>最近在研究页面渲染及web动画的性能问题，以及拜读 <a href="https://github.com/cssmagic/CSS-Secrets">《CSS SECRET》</a>（CSS揭秘）这本大作。</p><p>本文主要想谈谈页面优化之滚动优化。</p><p>主要内容包括了为何需要优化滚动事件，滚动与页面渲染的关系，节流与防抖，pointer-events:none 优化滚动。因为本文涉及了很多很多基础，可以对照上面的知识点，选择性跳到相应地方阅读。
        
      </div>

      <hr class="post-list__divider" />
    </li>
    
    <li>

      <h2 class="post-list__post-title post-title">
        <a href="/2016/04/28/css33d/" title="link to 【Web动画】CSS3 3D 行星运转 &amp;&amp; 浏览器渲染原理">【Web动画】CSS3 3D 行星运转 &amp;&amp; 浏览器渲染原理</a>
      </h2>

      <div class="post-list__meta">

        <time datetime="2016-04-28" class="post-list__meta--date date">2016-04-28</time> 
      </div>

      <div class="excerpt">
        
          <p>承接上一篇： <a href="https://github.com/chokcoco/cnblogsArticle/issues/9">【CSS3进阶】酷炫的3D旋转透视</a> 。</p><p>最近入坑 Web 动画，所以把自己的学习过程记录一下分享给大家。</p><p>CSS3 3D 行星运转 demo 页面请戳： <a href="http://chokcoco.github.io/demo/css3demo/html/exampleSolarSystem.html">Demo</a>。（建议使用Chrome打开）
        
      </div>

      <hr class="post-list__divider" />
    </li>
    
    <li>

      <h2 class="post-list__post-title post-title">
        <a href="/2016/04/21/css33dspective/" title="link to 【CSS3 3D 动画】酷炫的3D旋转透视">【CSS3 3D 动画】酷炫的3D旋转透视</a>
      </h2>

      <div class="post-list__meta">

        <time datetime="2016-04-21" class="post-list__meta--date date">2016-04-21</time> 
      </div>

      <div class="excerpt">
        
          <p>之前学习 react+webpack ，偶然路过 <a href="https://webpack.github.io/">webpack 官网</a> ，看到顶部的 LOGO ，就很感兴趣。</p><p>最近觉得自己 CSS3 过于薄弱，想着深入学习一番，遂以这个 LOGO 为切入口，好好研究学习了一下相关的 CSS3 属性。webpack 的 LOGO 动画效果乍看不是很难，深入了解之后，觉得内部其实大有学问，自己折腾了一番，做了一系列相关的 CSS3 动画效果。
        
      </div>

      <hr class="post-list__divider" />
    </li>
    
  </ol>

  <hr class="post-list__divider " />

<nav class="pagination" role="navigation">
    
    	
          <a class="newer-posts pagination__newer btn btn-small btn-tertiary" href="/archives/">&larr; 上一页 </a>
        
    

    <span class="pagination__page-number"> 2 / 4</span>
    
    
        <a class="older-posts pagination__older btn btn-small btn-tertiary" href="/archives/page/3/">下一页 &rarr;</a>
    
</nav>


</div>
        <footer class="footer">
	<div class="friendLink">友情链接：
		<ul>
			<li><a href="http://www.cnblogs.com/coco1s/">Coco</a></li>
			<li><a href="http://www.chengfeilong.com/">Scott's Blog</a></li>
			<li><a href="http://www.52cik.com/">楼教主</a></li>
			<li><a href="http://blog.aisuso.com/">姚嘉鑫博客</a></li>
		</ul>
	</div>
	<div class="copy_right"> &copy; chokcoco </div>
	<span class="footer__copyright"> 2014-2016. | 由<a href="https://hexo.io/"> Hexo </a>强力驱动 | 主题<a href="https://github.com/someus/huno"> Huno </a></span>

</footer>
<!-- 多说公共JS代码 start -->
<script type="text/javascript">
var duoshuoQuery = {short_name:"sbco"};
	(function() {
		var ds = document.createElement('script');
		ds.type = 'text/javascript';ds.async = true;
		ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
		ds.charset = 'UTF-8';
		(document.getElementsByTagName('head')[0]
		 || document.getElementsByTagName('body')[0]).appendChild(ds);
	})();
</script>
<!-- 多说公共JS代码 end -->
<!-- cnzz统计 -->
<script type="text/javascript">
	var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
	document.write(unescape("%3Cspan id='cnzz_stat_icon_1259441963'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s4.cnzz.com/z_stat.php%3Fid%3D1259441963' type='text/javascript'%3E%3C/script%3E"));
</script>
<!-- 文章阅读数统计 -->
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!-- 百度爬虫推送 -->
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

      </div>
    </div>
    <!-- js files -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/scale.fix.js"></script>
    
    

    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
            MathJax.Hub.Config({ 
                tex2jax: {inlineMath: [['[latex]','[/latex]'], ['\\(','\\)']]} 
            });
        });
    </script>


    
    
    
    <!--kill ie6 -->
<!--[if IE 6]>
  <script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->
</body>
</html>
